<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="ajile/com.iskitz.ajile.js?mvcoff,mvcshareoff,refresh"></script>
<script type="text/javascript" src="org.wattdepot.gdata.GDataLoader.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.kukuicup.Configuration.js"></script>
 
<script type="text/javascript">
// Wrap this code in an anonymous self-invoking function to avoid polluting global namespace.
(function() {
  // Get the configuration instance with access to kukuicup data.
  var configuration = new org.wattdepot.gdata.kukuicup.Configuration();
  // A spreadsheet containing dorm power data.
  var spreadsheetURL = configuration.getSampleAnnotatedTimelineUrl();
  // Don't refresh
  var refreshInterval = 0; 
  // Load the visualization API and the spreadsheet data, then call displayDormData.
  var loader = new org.wattdepot.gdata.GDataLoader(displayDormData, spreadsheetURL, refreshInterval);  
      
  // Display the timeline.
  function displayDormData(datatable) {
    var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
    chart.draw(datatable, {displayAnnotations: true});

  }
})();
</script>
</head>

<body>
  <div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>


